<!--
 * @Author: lihaogn
 * @Date: 2021-12-14 21:27:59
 * @LastEditTime: 2022-05-28 10:34:19
 * @LastEditor: lihaogn
 * @Description: 权限列表
 * @FilePath: \lix-admin-client-vue2\src\views\system\user-manage\permission-list\index.vue
-->
<template>
  <LixTableView :show-tool="true">
    <template #tool-left>
      <!-- 新增 -->
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        size="small"
        @click="handleNewPermission"
        >新增
      </el-button>
    </template>
    <template #tool-right>
      <el-popover placement="bottom-end" trigger="click">
        <p class="tip-title">关于新增：</p>
        <p>
          1 表格上方新增操作可新增 <strong>页面访问权限</strong> 和
          <strong>全局的操作权限</strong>。<br />
          2 表格中新增操作可新增 <strong>页面中的操作权限</strong>。
        </p>

        <template slot="reference">
          <el-tooltip effect="dark" content="帮助" placement="top">
            <el-button icon="el-icon-question" size="small"></el-button>
          </el-tooltip>
        </template>
      </el-popover>
    </template>

    <template #table="{maxHeight}">
      <!-- 表格 -->
      <el-table
        :data="tableData"
        row-key="id"
        v-loading="loading"
        border
        :max-height="maxHeight"
        :expand-row-keys="expandRowKeys"
      >
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <span v-if="item.prop == 'createdAt' || item.prop == 'updatedAt'">{{
              scope.row[item.prop] | dateFilter
            }}</span>
            <span v-else-if="item.prop === 'type'">
              {{ mapPermissionType(scope.row.type) }}
            </span>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="236px">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              @click="NewSubPermission(scope.row)"
            >
              新增
            </el-button>
            <el-button type="text" size="medium" @click="handleEdit(scope.row)">
              修改
            </el-button>
            <el-popconfirm
              style="margin-left:10px;"
              placement="top"
              icon="el-icon-info"
              icon-color="red"
              title="确认删除？"
              @confirm="handleDelete(scope.row)"
            >
              <el-button slot="reference" type="text" size="medium"
                >删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <NewOrUpdatePermissionDialog
      :visible.sync="newOrUpdateDialogVisible"
      :type="operationType"
      :dialog-data="dialogData"
      @ok="handleNewOk"
    />
  </LixTableView>
</template>

<script>
import {
  reqDeletePermission,
  reqGetPermissionList
} from '../../../../api/user-manage/permission/api'
import LixTableView from '../../../../components/template/lix-table-view/index.vue'
import { PERMISSION_TYPE } from '../../../../constant'
import NewOrUpdatePermissionDialog from './modules/NewOrUpdatePermissionDialog.vue'
export default {
  components: { LixTableView, NewOrUpdatePermissionDialog },
  data() {
    return {
      expandRowKeys: [],
      newOrUpdateDialogVisible: false,
      loading: false,
      tableData: [
        {
          name: '系统管理',
          description: '测试',
          mark: 'test',
          updatedAt: '2021-12-12 23:59'
        }
      ],
      tableColumns: [
        {
          label: '权限名称',
          prop: 'name'
        },
        {
          label: '权限标识',
          prop: 'mark'
        },
        {
          label: '权限类型',
          prop: 'type'
        },
        {
          label: '权限描述',
          prop: 'description'
        },
        {
          label: '创建时间',
          prop: 'createdAt'
        },
        {
          label: '修改时间',
          prop: 'updatedAt'
        }
      ],
      operationType: 'NEW',
      dialogData: {}
    }
  },
  created() {
    this.getPermissions()
  },
  methods: {
    /**
     * @author: lihaogn
     * @Date: 2022-05-28 10:30:49
     * @LastEditTime:
     * @description: 新增权限回调
     * @return {*}
     */

    async handleNewOk() {
      await this.getPermissions()
      if (this.operationType === 'NEW_SUB') {
        const s = new Set(this.expandRowKeys)
        s.add(this.dialogData.id)
        this.expandRowKeys = [...s]
      }
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-21 11:16:17
     * @description: 获取所有权限
     * @param {*}
     * @return {*}
     */

    async getPermissions() {
      this.loading = true
      const res = await reqGetPermissionList()
      if (res.success) {
        this.tableData = res.result
      }
      this.loading = false
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-21 11:14:28
     * @description: 映射权限类型
     * @param {*} type
     * @return {*}
     */

    mapPermissionType(type) {
      switch (type) {
        case PERMISSION_TYPE.PAGE:
          return '页面'
        case PERMISSION_TYPE.ACTION:
          return '操作'
        default:
          break
      }
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-20 00:45:19
     * @description: 新增权限
     * @param {*}
     * @return {*}
     */

    handleNewPermission() {
      this.operationType = 'NEW'
      this.newOrUpdateDialogVisible = true
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-20 00:47:11
     * @description: 修改权限
     * @param {*} row
     * @return {*}
     */

    handleEdit(row) {
      this.operationType = 'EDIT'
      this.dialogData = row
      this.newOrUpdateDialogVisible = true
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-20 01:18:57
     * @description: 新增子权限
     * @param {*} row
     * @return {*}
     */

    NewSubPermission(row) {
      this.operationType = 'NEW_SUB'
      this.dialogData = row
      this.newOrUpdateDialogVisible = true
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-20 20:50:11
     * @description: 删除权限
     * @param {*} row
     * @return {*}
     */

    async handleDelete(row) {
      const res = await reqDeletePermission(row.id)
      if (res.success) {
        this.$message.success(res.message)
        this.getPermissions()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tip-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8px;
}
</style>
